<template>
  <div id='app'>
    <header>
    <h1>学生名单管理</h1>
    <img src="../../assets/images/6.jpg" alt="">
    </header>
    <div class="main">
        <div class="overview">班级平均年龄:{{ avgAge }}</div>
    <!-- 管理系统的头部部分 -->
    <div class="tools-header">
        <button class="openModalBtn" @click="addStudent">添加新学生</button>
        <button @click="delSelectedStudent" class="openModalBtn">删除选中学生</button>
        <div>
            <input v-model="keyword" type="text" name="keyword" class="keyword" placeholder="Search by name">
            <button type="button" class="searchBtn" @click="generateSearchData">搜索</button>
        </div>
    </div>
    <!-- 管理系统的主体部分 -->
    <table class="studentTable">
        <thead>
            <tr>
                <th><input type="checkbox" class="selectAll" @change="changeSelectedAll" v-model="isAllSelect"></th>
                <th v-for="(item,index) in ar1" :key="index">{{ item }}</th>
            </tr>
        </thead>
        <tbody>
            <!-- Student rows will be added dynamically here -->
             <tr v-for="item in searchStudentArr" :key="item.id">
                <td><input type="checkbox" class="selectAll" @change="changeSelectedItem" v-model="item.selected"></td>
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.gender }}</td>
                <td>{{ item.hobbies }}</td>
                <td>{{ item.email }}</td>
                <td>{{ item.phone }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.create_at }}</td>
                <td>{{ item.update_at }}</td>
                <td>
                    <a href="javascript:void(0)" @click="editStuInfo(item)">修改</a>
                    <a href="javascript:void(0)" @click="delStuInfo(item)">删除</a>
                </td>
             </tr>
        </tbody>
    </table>
    <!-- 主题底部 -->
    <div class="studentModal modal" v-show="flg" @click="closeModel">
        <div class="modal-content" @click.stop>
            <h3 class="modalTitle" >{{ modelInfo.title }}</h3>
            <form class="studentForm">
                <input type="hidden" class="studentIdToEdit" v-model="stuFormData.id">

                <label for="studentName">名字</label>
                <input type="text" name="name" class="studentName" v-model="stuFormData.name" required>

                <label for="studentGender">性</label>
                <select name="gender" class="studentGender" v-model="stuFormData.gender" required>
                    <option value="女">女</option>
                    <option value="男">男</option>
                </select>

                <label for="studentHobbies">爱好</label>
                <input type="text" name="hobbies" class="studentHobbies" v-model="stuFormData.hobbies" required>

                <label for="studentEmail">电子邮件</label>
                <input type="email" name="email" class="studentEmail" v-model="stuFormData.email" required>

                <label for="studentPhone">电话</label>
                <input type="text" name="phone" class="studentPhone" v-model="stuFormData.phone" required>

                <label for="studentAge">年龄</label>
                <input type="number" name="age" class="studentAge" v-model="stuFormData.age" required>

                <button type="button" class="saveStudentBtn" @click="saveStyInfo">保存学生</button>
            </form>
        </div>
    </div>
</div>
<footer>
    <p>&copy; 2024 My Webpack Project</p>
</footer>
</div>
</template>

<script lang='ts'>
export default {
  name: 'zeng',
}
</script>

<script lang='ts' setup>
import { ref,computed } from 'vue'
import { getNowDateTime } from "@/utils/index";
import { uniqueId } from "lodash";
const ar1=ref(['身份证','名字','性','爱好','电子邮件','电话','年龄','创建时间','更新时间','行动'])
let flg=ref(false)
const closeModel=()=>{
    flg.value=false
}
const studentArr=ref([{
    id: 1,
    name: 'Alice',
    gender: '女',
    hobbies: 'Reading',
    email: 'alice@example.com',
    phone: '12345678901',
    age: 20,
    create_at: getNowDateTime(),
    update_at: getNowDateTime()
},{
    id: 2,
    name: 'Bob',
    gender: '男',
    hobbies: 'Sports',
    email: 'bob@example.com',
    phone: '10987654321',
    age: 22,
    create_at: getNowDateTime(),
    update_at: getNowDateTime()
}])
function initAction(){
    generateSearchData()
}
interface IStudent{
    id:number | string
    name:string
    gender:string
    hobbies:string
    email:string
    phone:string
    age:number | string
    create_at?:string
    update_at?:string
    selected?:boolean
}
const stuFormData=ref<IStudent>({
    id:1,
    name:'小明',
    gender:'男',
    hobbies:'唱跳rap',
    email:'5462369954@qq.com',
    phone:'15346552782',
    age:18
})
const saveStyInfo=()=>{
    if(modelInfo.value.type==='add'){
        stuFormData.value.id=uniqueId('newStu_')
        console.log(stuFormData.value);
        studentArr.value.push({
            ...JSON.parse(JSON.stringify(stuFormData.value)),
            create_at:getNowDateTime(),
            update_at:getNowDateTime()
        })
    }else{
        console.log(stuFormData.value,'修改学生信息');
        stuFormData.value.update_at=getNowDateTime()
        const index=studentArr.value.findIndex((i)=>i.id === stuFormData.value.id)
        studentArr.value[index]=JSON.parse(JSON.stringify(stuFormData.value))
    }
    initAction()
    closeModel()
    changeSelectedItem()
}
const avgAge=computed(()=>{
    return Math.round(
        studentArr.value.reduce(
            (previousValue,currentValue)=>previousValue + Number(currentValue.age),0
        ) / studentArr.value.length
    )
})
const modelInfo=ref({
    type:'add',
    title:'添加学生信息'
})
const addStudent=()=>{
    stuFormData.value={
        id:1,
        name:'小明',
        gender:'男',
        hobbies:'唱跳rap',
        email:'5462369954@qq.com',
        phone:'15346552782',
        age:18,
        create_at: getNowDateTime(),
        update_at:getNowDateTime()
    }
    modelInfo.value.type='add'
    modelInfo.value.title='添加学生信息'
    flg.value=true
}
const editStuInfo=(stu:IStudent)=>{
    modelInfo.value.type='edit'
    modelInfo.value.title='修改学生信息'
    stuFormData.value=JSON.parse(JSON.stringify(stu))
    flg.value=true
}
const delStuInfo=(item:IStudent)=>{
    const index=studentArr.value.findIndex((i)=>i.id===item.id)
    studentArr.value.splice(index,1)
    initAction()
    changeSelectedItem()
}
const searchStudentArr=ref<Array<IStudent>>([])
const keyword=ref('')
const generateSearchData=()=>{
    searchStudentArr.value=studentArr.value.filter((i)=>i.name.includes(keyword.value))
    console.log(studentArr.value);
    console.log(searchStudentArr.value);
}
// // 定义为计算属性
// const isAllSelect = computed(() => {
//     return searchStudentArr.value.length > 0 && searchStudentArr.value.every((i) => i.selected);
// });

// const changeSelectedAll = (event: Event) => {
//     const checked = (event.target as HTMLInputElement).checked;
//     searchStudentArr.value.forEach((item) => {
//         item.selected = checked;
//     });
// };

// const changeSelectedItem = () => {
//     // 由于使用了计算属性，此处无需手动计算isAllSelect的值了，它会自动响应变化
// };
const isAllSelect=ref(false)
const changeSelectedAll=(event:Event)=>{
    const checked=(event.target as HTMLInputElement).checked
    if(checked){
        searchStudentArr.value.forEach((item:IStudent)=>{item.selected=true})
    }else{
        searchStudentArr.value.forEach((item:IStudent)=>{item.selected=false})
    }
    changeSelectedItem()
}
const changeSelectedItem=()=>{
    if(searchStudentArr.value.length>0){
        isAllSelect.value=searchStudentArr.value.every((i)=>i.selected)
    }else{
        isAllSelect.value=false
    }
}
const delSelectedStudent=()=>{
    searchStudentArr.value.forEach((i)=>{
        if(i.selected){
            delStuInfo(i)
            generateSearchData()
        }
    })
}
initAction()
</script>

<style scoped lang='scss'>
#app{
    height: 100vh;
    background: url('../../assets/images/2.jpg')center center /cover no-repeat!important;
}
header{
    color: white;
    text-align: center;
    padding: 20px;
    background-color: transparent;
    h1{
        font-size: 24px;
        margin: 0;
    }
    img{
        width: 200px;
    }
}
.main {
    padding: 20px;
    .overview{
        text-align: center;
        color: white;
        font-size: 30px;
    }
    input{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0px;
        line-height: normal;
        background-color: #fff;
        color: #000000;
    }
    button{
        margin: 0;
        min-width: 0;
        line-height: normal;
        height: auto;
        border: none;
    }
    .tools-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .openModalBtn {
            background-color: #4caf50;
            color: #fff;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 4px;

            &:hover {
                background-color: #45a049;
            }
        }

        div {
            display: flex;
            align-items: center;

            .keyword {
                padding: 8px;
                font-size: 16px;
                border: 1px solid #ccc;
                border-radius: 4px;
                margin-right: 10px;
            }

            .searchBtn {
                background-color: #2196f3;
                color: #fff;
                padding: 8px 16px;
                font-size: 16px;
                border-radius: 4px;

                &:hover {
                    background-color: #1976d2;
                }
            }
        }
    }

    .studentTable {
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        th,
        td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f9f9f9;
        }

        button {
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
            margin-right: 5px;

            &.editBtn {
                background-color: #ff9800;
                color: #fff;

                &:hover {
                    background-color: #e68900;
                }
            }

            &.deleteBtn {
                background-color: #f44336;
                color: #fff;

                &:hover {
                    background-color: #d32f2f;
                }
            }
        }
    }

    .modal {
        // display: none;
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);

        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 4px;
            width: 400px;

            .modalTitle {
                margin-bottom: 20px;
                font-size: 20px;
                text-align: center;
            }

            label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }

            input,
            select {
                width: 100%;
                padding: 8px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }

            .saveStudentBtn {
                background-color: #4caf50;
                color: #fff;
                padding: 10px;
                font-size: 16px;
                border-radius: 4px;
                width: 100%;

                &:hover {
                    background-color: #45a049;
                }
            }
        }
    }
}
footer{
    background-color: #f1f1f1;
    color: #6660;
    padding: 10px 20px;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    p{
        margin: 0;
        font-size: 14px;
    }
}
</style>